<template>
  <div>
    <button class="bg-[#1483F2] p-2 rounded-md m-2 gap-2" @touchend="next">下一个师傅({{ i + 1 }}/{{ workers.length
    }})</button>
    <div class="Line p-2 rounded-md m-2 gap-2 flex-col flex">
      <div class="">
        <!-- 头像信息 -->
        <div class="flex">
          <image :src="avatarUrl" class="w-25 h-30 " />
          <div class="m-2 flex flex-col gap-1">
            <div class="font-bold items-center flex gap-1 ">
              <text class="w-45">
                {{ workers[i].name }}
              </text>
              <text class="font-light bg-gray-200 p-1 rounded-md text-xs">已认证</text>

            </div>

            <!-- <div class="text-[#101010]">
              工龄：{{ workers[i].seniority }}年
            </div>
            <div class="text-[#5B5B5B]">
              {{ workers[i].works.length }}单|{{ finalScore }}%好评
            </div> -->

            <div class="flex">
              <image src="/static/call.png" class="w-6 h-6 rounded-full" mode="aspectFit" />
              <div class="text-[#08519B] text-lg">
                {{ workers[i].phone }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="flex gap-2 items-center">
        <image class="w-4 h-4" src="/static/location.png" />
        {{ workers[i].location }}
      </div>
    </div>


    <BoxComments :user="workers[i]._id" v-if="workers[i]._id" />

  </div>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive, computed } from 'vue'
import BoxComments from '../../components/BoxComments.vue';


const i = ref(0)
const workers = ref(
  [
    {
      name: '张随缘1',
      seniority: 20,
      phone: '158-1569-5698',
      avatar: 'http://1.116.1.178:8000/image/3875e4cf-7b9d-4360-afb7-7cd925839114Hgr3dLMRC2ar62ea1fd1b979e8c32ae3d767eccd40a3.jpg',
      location: '中国农业大学111111111',
      works: [],
      apply: {},
      comments:
        [
          {
            uid: '罗师傅1',
            content: '很不错！很不错！很不错！很不错！很不错！很不错！很不错！很不错！很不错！',
            rate: 0,
            createdAt: '2023-02-27',
          },
          {
            uid: '李师傅1',
            content: '很不错！很不错！很不错！很不错！很不错！很不错！很不错！很不错！很不错！',
            rate: 1,
            createdAt: '2023-02-27',
          },
          {
            uid: '张师傅1',
            content: '很不错！很不错！很不错！很不错！很不错！很不错！很不错！很不错！很不错！',
            rate: 2,
            createdAt: '2023-02-27',
          }
        ]
    },
    {
      name: '张随缘2',
      seniority: 20,
      phone: '158-1569-5698',
      avatar: 'http://1.116.1.178:8000/image/3875e4cf-7b9d-4360-afb7-7cd925839114Hgr3dLMRC2ar62ea1fd1b979e8c32ae3d767eccd40a3.jpg',
      location: '中国农业大学2222222',
      works: [],
      apply: {},
      comments:
        [
          {
            uid: '罗师傅2',
            content: '很不错！很不错！很不错！很不错！很不错！很不错！很不错！很不错！很不错！',
            rate: 0,
            createdAt: '2023-02-27',
          },
          {
            uid: '李师傅2',
            content: '很不错！很不错！很不错！很不错！很不错！很不错！很不错！很不错！很不错！',
            rate: 1,
            createdAt: '2023-02-27',
          },
          {
            uid: '张师傅2',
            content: '很不错！很不错！很不错！很不错！很不错！很不错！很不错！很不错！很不错！',
            rate: 2,
            createdAt: '2023-02-27',
          }
        ]
    }
  ]
)

onLoad((option) => {
  uni.request({
    url: "/apply/order/" + option.rid,
    success: ({ data }) => {
      workers.value = data
      console.log(data)
    }
  })
})

function next() {
  i.value = (i.value + 1) % (workers.value.length)

}

const avatarUrl = computed(() => {
  console.log("test")
  console.log(workers.value[i.value].avatar)
  return workers.value[i.value].avatar
})


// const finalScore = computed(() => {
//   let total = 0
//   const len = workers.value[i.value].comments.length
//   for (let j = 0; j < len; j++) {
//     total = total + workers.value[i.value].comments[j].rate;
//   }
//   let score = 0
//   if (total != 0) {
//     score = total / (2 * len) * 100
//   }
//   return score
// })
</script>

<style scoped>
.Line {
  border: 1px solid rgba(31, 31, 31);
}
</style>
